<template>
  <view class="goods-info">
    <view v-for="(item, index) in data" :key="index" class="goods-item">
      <view class="goods-title">
        <text class="goods-title-label">{{ item.title }}</text>
        <text v-if="formatSpec(item)" class="goods-title-spec">{{ formatSpec(item) }}</text>
      </view>
      <view class="goods-num">
        <text>×{{ item.num||0 }}</text>
      </view>
      <view class="goods-price">
        <text>￥{{ item.price||0 }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  methods: {
    formatSpec(item) {
      let str = "";
      let arr1 = (item.spec && item.spec.map(v => v.value)) || [];
      let arr2 = (item.props && item.props.map(v => v.v[0])) || [];
      return [...arr1, ...arr2].join(" ");
    }
  }
};
</script>

<style scoped lang="scss">
.goods-info {
  .goods-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx 0;
    // border-bottom: 1px solid #eeeeee;
    .goods-title {
      width: 60%;
    }
    .goods-num {
      width: 15%;
    }
    .goods-price {
      flex-grow: 1;
      width: 20%;
    }
    // .goods-title,
    // .goods-num,
    // .goods-price {
    //   flex-grow: 1;
    //   width: 33.3333%;
    // }
    .goods-title {
      display: flex;
      flex-direction: column;
      .goods-title-label {
        font-weight: 600;
      }
      .goods-title-spec {
        font-size: $uni-font-size-sm;
        color: $uni-text-color-grey;
      }
    }
    .goods-num {
      text-align: center;
    }
    .goods-price {
      text-align: right;
    }
  }
}
</style>
